<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件委派</title>
	<style>
		*{padding:0;margin:0;}
		ul{list-style:none;}
		#uid li{
			width:500px;
			height:30px;
			line-height:30px;
			background-color:#ccc;
			border-bottom:1px solid #333;
			padding-left:10px;
		}
	</style>
</head>
<body>
	<h1>事件委派</h1>
	<ul id="uid" >
		<li>11111</li>
		<li>22222</li>
		<li>33333</li>
		<li>44444</li>
	</ul>
	<br><br>
	<input type="text" id="name" >
	<button id="btn" >添加</button>
</body>
	<script>
		uid = document.getElementById("uid");
		btn = document.getElementById("btn");
		btn.onclick=function(){
			var str = document.getElementById("name").value;
			lis = document.createElement("li");
			lis.innerHTML = str;
			uid.appendChild(lis);
		}

	</script>
</html>